<template>
  <div class="audit">
    <div class="card-container mb-2">
      <div class="audit-title">
        发版计划审核
        <Tag
          class="ml-2"
          :color="auditInfo.isAudit == '0' ? 'success' : 'warning'"
          >{{ auditEnum[auditInfo.isAudit as keyof typeof auditEnum] }}</Tag
        >
      </div>
      <Row class="mb-2.5">
        <Col :span="6">
          <span class="audit-txt">创建时间</span>
          <span>{{ auditInfo.createTime }}</span>
        </Col>
        <Col :span="4">
          <span class="audit-txt">申请人</span>
          <span>{{ auditInfo.createBy }}</span>
        </Col>
        <Col :span="6">
          <span class="audit-txt">审核时间</span>
          <span>{{ auditInfo.auditTime ? auditInfo.auditTime : '--' }}</span>
        </Col>
        <Col :span="4">
          <span class="audit-txt">审核人</span>
          <span>{{ auditInfo.auditBy ? auditInfo.auditBy : '--' }}</span>
        </Col>
      </Row>
    </div>

    <Row :gutter="10">
      <Col :span="4">
        <div class="card-container scroll-container">
          <p>推送方式</p>
          <span>{{ auditInfo.sendType == '1' ? '设备推送' : '项目推送' }}</span>
          <p class="mt-2">版本类型</p>
          <span>{{
            auditInfo.deviceType == '1' ? '软件版本' : '固件版本'
          }}</span>
          <p class="mt-2">版本ID</p>
          <span>{{ auditInfo.code }}</span>
          <p class="mt-2">包版本</p>
          <span>{{ auditInfo.mainVersionShow }}</span>
          <p class="mt-2">更新类型</p>
          <span>{{ appUpdateTypeEnum[auditInfo.appUpdateType] }}</span>
          <p class="mt-2">版本说明</p>
          <span>{{ auditInfo.versionDesc }}</span>
          <div class="info-item">
            <p class="mt-2">设备类型/型号</p>
            <Tree
              :tree-data="auditInfo.modelAlwaysVOS"
              :field-names="fileNames"
            />
          </div>
          <div v-if="auditInfo.appUpdateType == '2'">
            <p class="mt-2">
              {{
                auditInfo.deviceType == '1'
                  ? '待升级软件版本'
                  : '待升级固件版本'
              }}
            </p>
            <span>{{ `${auditInfo.currentVersion}` }}</span>
          </div>
        </div>
      </Col>
      <Col :span="20">
        <div class="card-container">
          <Row>
            <Col :span="6">
              <p>项目总数</p>
              <span>{{ statistics.projectNum }}</span></Col
            >
            <Col :span="3">
              <p>已选设备总数</p>
              <span>{{
                auditInfo.sendType == '1'
                  ? dataSource.length
                  : statistics.deviceNum
              }}</span></Col
            >
            <Col :span="3" v-for="(item, index) in statistics.typeList">
              <p>{{ item.typeName }}</p>
              <span>{{ item.sum }}</span>
            </Col>
          </Row>
        </div>
        <Row justify="start">
          <Col>
            <div class="table-title">推送列表</div>
          </Col>
        </Row>
        <Table
          :scroll="{ x: 500, y: '46vh' }"
          :columns="auditInfo.sendType == '1' ? columnsDevice : columnsProject"
          size="middle"
          :data-source="dataSource"
          class="h-[20vh]"
        >
        </Table>
      </Col>
    </Row>
  </div>
</template>
<script setup lang="tsx">
import { computed, h, onMounted, reactive, ref, watch } from 'vue';
import {
  Col,
  Modal,
  Row,
  Table,
  type TableProps,
  Tag,
  Tree,
  TreeProps,
  TreeSelect,
  message,
} from 'ant-design-vue';
import { ProTable, ProTableProps } from '@/components/ProTable/index';
import { columnWidth, listToEnum } from '@/utils/utils';
import {
  appUpdateTypeEnum,
  appUpdateTypeOption,
  auditEnum,
  packageTypeEnum,
} from '@/constant/push';
import { fetchDictsOfType } from '@/api/dict';
import { getDeviceMode, submitVersionAudit } from '@/api/push';

const props = defineProps({
  audit: {
    type: Object,
    default: {},
  },
});
watch(
  () => props.audit,
  (newVal) => {
    if (newVal.sendType == '1') {
      dataSource.value = newVal.sendDeviceVo;
    } else {
      dataSource.value = newVal.projectDeviceGroupMap;
    }
    statistics.value = newVal.statistics;
    auditInfo.value = newVal;
  },
  { deep: true },
);
const statistics = ref({
  projectNum: 0,
  deviceNum: 0,
  typeList: [
    {
      typeName: '预警终端',
      sum: 0,
    },
    {
      typeName: '预警喇叭',
      sum: 0,
    },
    {
      typeName: '桌面终端',
      sum: 0,
    },
  ],
});
const auditInfo = ref<any>({});
const dataSource = ref([]);
const fileNames: TreeProps['fieldNames'] = {
  title: 'typeName',
  children: 'modeName',
};
const modalList = ref<any[]>([]);
const sysDeviceModeEnum = ref<Record<string, any>>({});
onMounted(() => {
  fetchDictsOfType(['sys_device_mode']).then((res: any) => {
    const { sys_device_mode } = res.data;
    sysDeviceModeEnum.value = listToEnum(
      sys_device_mode,
      'dictValue',
      'dictLabel',
    );
  });
  getDeviceMode({}).then((res) => {
    modalList.value = res.data as any;
  });
});
const formatModal = (val: any) => {
  let arr = modalList.value.filter((item) => {
    return item.modelId == val;
  });
  return arr[0]?.model;
};
const columnsDevice = computed<ProTableProps['columns']>(() => [
  {
    title: '所属项目',
    dataIndex: 'shortName',
    align: 'center',
    width: columnWidth('shortName', dataSource.value, '所属项目'),
  },
  {
    title: '设备序列号',
    dataIndex: 'deviceCode',
    align: 'center',
    width: columnWidth('deviceCode', dataSource.value, '设备序列号'),
  },
  {
    title: '软件版本',
    dataIndex: 'softwareVersion',
    align: 'center',
    customRender({ text, record }) {
      return text + (record.versionCode ? `(${record.versionCode})` : '');
    },
    width: columnWidth('softwareVersion', dataSource.value, '所属项目', 20),
  },
  {
    title: '固件版本',
    dataIndex: 'firmwareVersion',
    align: 'center',
    width: columnWidth('firmwareVersion', dataSource.value, '所属项目'),
  },
  {
    title: '设备型号',
    dataIndex: 'modelId',
    align: 'center',
    customRender({ text }) {
      return formatModal(text);
    },
    width: columnWidth('modelId', dataSource.value, '所属项目', 20),
  },
  {
    title: '设备类型',
    dataIndex: 'deviceType',
    align: 'center',
    width: columnWidth('deviceType', dataSource.value, '所属项目'),
    customRender({ text }) {
      return sysDeviceModeEnum.value[text as string];
    },
  },
  {
    title: '地址',
    dataIndex: 'address',
    align: 'center',
    width: columnWidth('address', dataSource.value, '所属项目'),
  },
]);
const columnsProject = computed<ProTableProps['columns']>(() => [
  {
    title: '所属项目',
    dataIndex: 'projectName',
    align: 'center',
    width: columnWidth('projectName', dataSource.value, '所属项目'),
  },
  {
    title: '设备类型/型号',
    dataIndex: 'modelAlwaysVOS',
    align: 'center',
    width: 240,
    customRender: ({ record }) => {
      const fileNames: TreeProps['fieldNames'] = {
        title: 'typeName',
        children: 'modeName',
      };
      return h(Tree, {
        treeData: record.modelAlwaysVOS,
        fieldNames: fileNames,
      });
    },
  },
  {
    title: '设备总数',
    dataIndex: 'count',
    align: 'center',
    width: columnWidth('count', dataSource.value, '所属项目'),
  },
  {
    title: '项目说明',
    dataIndex: 'projectRemark',
    align: 'center',
    width: columnWidth('projectRemark', dataSource.value, '所属项目'),
  },
]);
const emit = defineEmits(['versionAudit']);
const onConfirm = async () => {
  Modal.confirm({
    title: '系统提示',
    centered: true,
    content: `确认审核通过？`,
    onOk: async () => {
      await submitVersionAudit({
        id: auditInfo.value.id,
        isAudit: '0',
      });
      message.success('审核成功');
      emit('versionAudit', true);
    },
  });
};
defineExpose({
  onConfirm,
});
</script>
<style lang="scss" scoped>
.audit-title {
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
}

.audit-txt {
  margin-right: 12px;
  color: #fff;
}
.table-title {
  height: 36px;
  line-height: 36px;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
}
.audit-code {
  margin: 10px 0;
  font-weight: bold;
}
.scroll-container {
  height: calc(60vh - 115px);
  overflow-y: auto;
  p {
    position: relative;
    color: #fff;
    &::before {
      position: absolute;
      left: -8px;
      top: 50%;
      transform: translateY(-50%);
      content: '';
      width: 2px;
      height: 12px;
      background-color: #1890ff;
    }
  }
}
:deep(.ant-table) {
  height: calc(55vh - 235px);
}
:deep(.ant-table-body) {
  height: calc(55vh - 275px);
}
// :deep(.ant-table-body) {
//   height: 29vh;
// }
:deep(.ant-tree) {
  background: none;
}
</style>
